<template>
  <div class="popup-wrapper">
    <!-- 弹出层的头部区域 -->
    <van-nav-bar title="频道管理">
        <template #right>
          <van-icon name="cross" size="18" color="#fff" @click="closeChannel"/>
        </template>
    </van-nav-bar>
    <!-- 我的频道 -->
    <div class="my-channel-box">
      <div class="channel-title">
        <div>我的频道
          <span class="small-title">
            {{isEdit ? '点击删除频道' : '点击进入频道'}}
          </span>
        </div>
        <span @click="onEdit">{{isEdit ? '完成' : '编辑'}}</span>
      </div>
    </div>
    <!-- 我的频道列表 -->
    <van-row type="flex">
        <van-col span="6" v-for="channel in userChannelList" :key="channel.id" @click="deleteChannels(channel)">
          <div class="channel-item van-hairline--surround">
            {{channel.name}}
            <!-- 删除的徽标,推荐频道不能有X -->
            <van-badge v-if="isEdit && channel.id>0" color="transparent" class="cross-badge">
              <template #content>
                <van-icon
                  name="cross"
                  class="badge-icon"
                  color="#cfcfcf"
                  size="0.32rem"
                />
              </template>
            </van-badge>
          </div>
        </van-col>
      </van-row>

    <!-- 更多频道 -->
    <div class="more-channel-box">
      <div class="channel-title">
        <span>点击添加更多频道：</span>
      </div>
      <!-- 更多频道列表 -->
      <van-row type="flex">
        <van-col span="6" v-for="channel in moreChannelList" :key="channel.id" @click="addChannel(channel)">
          <div class="channel-item van-hairline--surround">{{channel.name}}</div>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
import Mixin from '@/utils/mixin'
export default {
  name: 'ArticlesChannelEdit',
  mixins: [Mixin],
  props: {
    userChannelList: Array,
    moreChannelList: Array
  },
  data () {
    return {
      isEdit: false // 显示删除的图标
    }
  },
  methods: {
    // 编辑频道
    onEdit () {
      this.isEdit = !this.isEdit
    },
    // 关闭频道管理弹出层
    closeChannel () {
      this.setChannelEdit(false)
      // 隐藏频道上的删除图标
      this.isEdit = false
    },
    // 订阅频道,处于编辑状态下
    addChannel (channel) {
      if (this.isEdit) {
        // 订阅的频道数组是在父组件上的
        this.$bus.$emit('addChannel', channel)
      }
    },
    // 编辑状态下，删除订阅的频道
    // 非编辑状态下，进入频道
    deleteChannels (channel) {
      // 推荐频道不能删除，且在编辑状态下不能进入推荐频道
      if (this.isEdit) {
        if (channel.id !== 0) {
          // 两个if不行一起写，否则在编辑状态下点击推荐频道会进入
          this.$bus.$emit('deleteChannels', channel)
        }
      } else {
        // 进入频道
        this.$bus.$emit('enterChannel', channel.id)
        // 同时退出编辑状态
        this.isEdit = false
      }
    }
  }
}
</script>

<style lang='less' scoped>
.popup-wrapper {
  width: 100vw;
  height: 100vh;
  padding: 0 10px;
  background-color: #fff;
  z-index: 999;
}

.my-channel-box,
.more-channel-box {
  .channel-title {
    display: flex;
    padding: 0 6px;
    font-size: 14px;
    line-height: 28px;
    justify-content: space-between;
  }
  .small-title {
  font-size: 10px;
  color: gray;
  }
}

.channel-item {
  margin: 5px;
  font-size: 16px;
  text-align: center;
  line-height: 36px;
  background-color: #fafafa;
}

/*删除的微标 */
.cross-badge {
  position: absolute;
  right: -3px;
  top: 0;
  border: none;
}
.badge-icon {
  display: block;
  font-size: 10px;
  line-height: 16px;
}
</style>
